<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="status-bar"></view>
			<view class="nav-bar">
				<view class="back-btn" @click="backPage()">
					<view class="back-icon"></view>
				</view>
				<view class="title">订单管理</view>
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<text>输入需要搜索的内容</text>
				<text class="search-icon">&#xe61c;</text>
			</view>
		</view>
		
		<!-- 状态栏 -->
		<view class="status-bar-info">
			<view class="total-count">共{{OrderList.length}}条</view>
		</view>
		
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="item in OrderList">
				<view class="order-header">
					<view class="order-number">订单号: {{item.id}}</view>
					<view class="order-price">￥{{item.price}}</view>
				</view>
				<view class="order-content">
					<view class="order-info">下单用户: {{item.userInfo.userName || '加载中...'}}</view>
					<view class="filter">
						 <text>
						        服务状态: {{ statusMap[item.status]?.text || '未知状态' }}
						</text>
					</view>
					<view class="order-info">预约时间: {{item.reservationTime}}</view>
					<view class="order-info">服务项目: {{item.serviceType.name}}</view>
					<view class="order-footer">
						<view class="order-time">下单时间: {{item.orderTime}}</view>
						<view class="order-detail-btn" @click="toDetail(item)">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import request from '@/pages/util/request.js';
import baseUrl from '@/pages/util/urlConfig.js';
import { onMounted } from 'vue';
import { ref } from 'vue';
	const OrderList=ref([])
	const statusMap = {
	  0: { text: '待支付', class: 'bg-green-100 text-green-800' },
	  1: { text: '待使用', class: 'bg-blue-100 text-blue-800' },
	  2: { text: '待评价', class: 'bg-gray-100 text-gray-800' },
	  3: { text: '已取消', class: 'bg-gray-100 text-gray-800' },
	  4: { text: '已退款', class: 'bg-gray-100 text-gray-800' },
	  5: { text: '已完成', class: 'bg-gray-100 text-gray-800' },
	};
	function requestPromise(config) {
	  return new Promise((resolve, reject) => {
	    request({
	      url: config.url,
	      method: config.method,
	      data: config.data,
	      success: resolve,
	      fail: reject
	    });
	  });
	}
	onMounted(async () => {
	  await getOrderList();
	});	
	
	function toDetail(order){
		uni.navigateTo({
			url:'/pages/index/dingdanguanli/dingdanxiangqing/dingdanxiangqing',
			success:function(res){
				 res.eventChannel.emit('acceptOrderDetail', order);
			}
		})
	}
	// 获取订单列表
	async function getOrderList() {
	  try {
	    const res = await requestPromise({
	      url: baseUrl + '/wwc/orders/list',
	      method: 'GET',
	      data: { pageNum: 1, pageSize: 10 }
	    });
		console.log(res.data.rows)
	    const orders = res.data.rows || [];
	    // 顺序处理每个订单
	    for (let i = 0; i < orders.length; i++) {
	      await getUserinfoByCarid(orders[i], i);
	      await getserviceType(orders[i], i);
	    }
	    OrderList.value = orders;
	  } catch (e) {
	    OrderList.value = [];
	  }
	}
	
	// 根据carid获取用户信息
	async function getUserinfoByCarid(order, idx) {
	  try {
	    const res = await requestPromise({
	      url: baseUrl + '/wx/info/' + order.carId,
	      method: 'GET'
	    });
	    const uid = res.data.data.uid;
	    const userRes = await requestPromise({
	      url: baseUrl + '/wwc/user/' + uid,
	      method: 'GET'
	    });
	    order.userInfo = userRes.data.data;
	  } catch (e) {
	    order.userInfo = { userName: '未知用户' };
	  }
	}
	
	// 根据serviceid查询服务类型
	async function getserviceType(order, idx) {
	  try {
	     // 1. 首先从中间表获取服务ID列表
	        const relationRes = await requestPromise({
	          url: baseUrl + '/yhj/details/orderid/' + order.id,
	          method: 'GET'
	        });
	        // console.log("serviceId",relationRes.data.data)
	        const serviceIds = relationRes.data.data || [];
			console.log("serviceIDS",serviceIds)
			// 2. 获取所有服务类型信息
			const serviceTypes = [];
			for (const serviceId of serviceIds) {
				console.log('serviceId',serviceId)
			  const serviceRes = await requestPromise({
				url: baseUrl + '/xyq/type/' + serviceId.serviceId,
				method: 'GET'
			  });
			  if (serviceRes.data.data) {
				serviceTypes.push(serviceRes.data.data);
			  }
			}
			
			// 3. 将服务类型信息挂到订单对象上
			order.serviceType = {
			  name: serviceTypes.map(type => type.name).join('、')
			};
	  } catch (e) {
	    // order.serviceType = { name: '未知服' };
	  }
	}
	
	function backPage(){
		uni.navigateBack()
	}
	
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		background: #1989fa;
		color: #fff;
		position: relative;
	}
	
	.status-bar {
		height: 25px;
	}
	
	
	
	
	.nav-bar {
		height: 44px;
		display: flex;
		align-items: center;
		padding: 0 15px;
	}
	
	.back-btn{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	
	.back-icon {
		width: 30px;
		height: 30px;
		/* position: relative; */
	}
	
	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}
	
	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}
	
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}
	
	.right {
		display: flex;
		align-items: center;
	}
	
	.dot-menu {
		display: flex;
		margin-right: 10px;
	}
	
	.dot {
		width: 4px;
		height: 4px;
		background-color: #fff;
		border-radius: 50%;
		margin: 0 2px;
	}
	
	.circle-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.target-icon {
		font-size: 18px;
	}
	
	.search-box {
		padding: 10px 20px;
		background-color: #1989fa;
	}
	
	.search-input {
		background-color: #fff;
		height: 36px;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		color: #999;
	}
	
	.search-icon {
		color: #1989fa;
	}
	
	.status-bar-info {
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		color: #666;
	}
	
	.filter {
		display: flex;
		align-items: center;
	}
	
	.down-arrow {
		margin-left: 5px;
	}
	
	.order-list {
		padding: 0 15px;
	}
	
	.order-item {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.order-price {
		color: #ff5722;
	}
	
	.order-content {
		padding: 15px;
	}
	
	.order-info {
		line-height: 25px;
		color: #333;
	}
	
	.order-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		align-items: center;
	}
	
	.order-time {
		color: #999;
	}
	
	.order-detail-btn {
		background-color: #1989fa;
		color: #fff;
		padding: 8px 10px;
		border-radius: 15px;
	}
</style>
